<template>
  <el-card shadow="never" style="margin-bottom: 16px;">
    <div class="title">
      <div class="img">
        <img src="/static/ecommerce/store_manage_default.png" alt="" />
      </div>
      <div class="text">
        <div class="text-title">{{textTitle}}</div>
        <div class="text-detail">{{textDetail}}</div>
        <div class="btns">

          <!-- 外链暂时隐藏 -->
          <!-- <el-button size="small" @click="introduce">功能介绍</el-button> -->
          
        </div>
      </div>
    </div>
  </el-card>
  <el-card shadow="never">
    <div class="default-content">
      <div class="default-img">
        <img src="/static/basic/Group.png" alt="" />
      </div>
      <div class="default-text">当前还没有店铺哦～</div>
      <div class="default-btn">
        <el-button size="small" type="primary" @click="toAdd">去添加</el-button>
      </div>
    </div>
  </el-card>

</template>
<script setup lang="tsx">
import { reactive, ref, watch, computed, nextTick } from 'vue'
import router from '@/router'

const textTitle = ref<string>('店铺管理')
const textDetail = ref<string>('通过店铺管理平台，集成淘宝、天猫、抖店、有赞、自有商铺的用户行为及交互数据，通过客易达平台的打通，完善客户画像，实现精细化运营。')

const props = withDefaults(defineProps<{introduceUrl?: string}>(),{
  introduceUrl: ''
})

const introduce = ()=>{
  console.log('功能介绍')
  !!props.introduceUrl && window.open(props.introduceUrl, '_blank')
}

const toAdd = ()=>{
  console.log('去添加')
  const path = '/appmarket/appmarket'
  router.push(path)
}


</script>

<style scoped lang="scss">
  $length: 80px;
  .title{
    width: 100%;
    display: flex;
    align-items: center;

    .img{
      width: $length;
      height: $length;
      border-radius: 8px;
      overflow: hidden;
      margin-right: 8px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .text{
      line-height: 1.8;
      .text-detail{
        font-size: 12px;
      }
      .btns{

      }
    }
  }

  .default-content{
    height: calc(100vh - 330px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .default-img{

    }
    .default-text{
      margin: 6px 0 24px;
      font-size: 14px;
      font-weight: 300;
      letter-spacing: 2px;
    }
    .default-btn{

    }
  }
</style>
